<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一周练习</title>

    <!-- 外部样式 style.css -->
    <!-- <link rel="stylesheet" type="text/css" href="style.css"/> -->
    <style>
        div.static {
            position: static;
            /* border: 3px solid #73AD21; */
        }

        #pos_fixed {
            position: fixed;
            top: 30px;
            left: 5px;
        }

        .pos_right {
            position: relative;
            left: 50px;
        }

        h2 {
            position: absolute;
            top: 100px;
            right: 100px;
        }

        /* .center{
            text-align:center;
            background-color: rgba(228, 46, 46, 0.418);
        } */

        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            padding: 10px;
            background: #f1f1f1;
        }

        /* 头部标题 */
        .header {
            padding: 30px;
            text-align: center;
            background: white;
        }

        .header h1 {
            font-size: 50px;
        }

        /* 导航条 */
        .topNav {
            overflow: hidden;
            background-color: #333;
        }

        /* 导航条链接 */
        .topNav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 链接颜色修改 */
        .topNav a:hover {
            background-color: #ddd;
            color: black;
        }

        .flex-container {
            display: -webkit-flex;
            display: flex;
            /* -webkit-justify-content: space-between;
            justify-content: space-between; */
            width: 400px;
            height: 250px;
            background-color: lightgrey;
        }

        .flex-item {
            background-color: cornflowerblue;
            width: 60px;
            min-height: 100px;
            margin: 10px;
        }

        .item1 {
            -webkit-align-self: flex-start;
            align-self: flex-start;
        }

        .item2 {
            -webkit-align-self: flex-end;
            align-self: flex-end;
        }

        .item3 {
            -webkit-align-self: center;
            align-self: center;
        }

        .item4 {
            -webkit-align-self: baseline;
            align-self: baseline;
        }

        .item5 {
            -webkit-align-self: stretch;
            align-self: stretch;
        }

        /* 底部 */
        .footer {
            padding: 10px;
            text-align: center;
            background: #333;
            margin-top: 20px;
        }
        .footer p{
            color: #ddd;
        }

        /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
        @media screen and (max-width: 600px) {
            .topNav a {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div style="color:#575783;text-align:left">
        <div class="header">
            <h1>我的个人简介</h1>
            <p>重置浏览器大小试试看</p>
        </div>
        <h2 class="center">我的绝对不动</h2>
        <div class="topNav">
            <a href="#">基本信息</a>
            <a href="#">教育信息</a>
            <a href="#" style="float: right;">其它</a>
        </div>
        <p>照片：
            <a href="https://gitee.com/s3mb">
                <img src="../cuiwei/icon/smiley-2.gif" alt="Smiley face" width="42" height="42">
            </a>
        </p>
        <p class="pos_right">
            我没有<span style="color: blue;font-weight: bold;">蓝色</span>的眼睛，我家人也没有<span
                style="color: darkolivegreen;font-weight: 900;">碧绿色</span>的眼睛。
        </p>
    </div>
    <!-- <div class="static">
        该元素使用了 position: static;
    </div> -->
    <p id="pos_fixed">
           浮动的我
    </p>
    <!-- <p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p> -->
    <form action="demo-form">
        First name:<input type="text" name="FirstName" value="cui"><br>
        Last name:<input type="text" name="LastName" value="wei"><br>
    </form>
    <p>
        性别：
        <select name="demo-select" id="212">
            <option value="Man">男</option>
            <option value="Woman">女</option>
        </select>
    </p>
    <p>
        个人简介：
        <textarea rows="5" cols="30">我是一个个人简介。</textarea>
    </p>

    <p>
        教育经历：
        <div class="flex-container">
            <div class="flex-item item1">小学</div>
            <div class="flex-item item2">初中</div>
            <div class="flex-item item3">高中</div>
            <div class="flex-item item4">大学</div>
            <div class="flex-item item5">研究生</div>
        </div>
    </p>
    

    <div class="footer">
        <p>底部区域</p>
    </div>

    <table width = "100%" border="0" cellspacing="0" align="center">
        <tr>
            <td align="center" class="biaoti" height="60">学生信息的统计</td>
        </tr>
    </table>
</body>

</html>